<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加密货币信息聚合系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <meta name="description" content="实时聚合Twitter、币安、OKX、GeckoTerminal、CoinGecko、GMGN、Ave.ai等平台的加密货币信息">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <h1>🚀 Crypto Aggregator</h1>
                <span class="nav-subtitle">加密货币信息聚合系统</span>
            </div>
            <div class="nav-menu" id="navMenu">
                <a href="#dashboard" class="nav-link active" data-section="dashboard">
                    <span class="nav-icon">📊</span>
                    概览
                </a>
                <a href="#tokens" class="nav-link" data-section="tokens">
                    <span class="nav-icon">💰</span>
                    代币分析
                </a>
                <a href="#smart-money" class="nav-link" data-section="smart-money">
                    <span class="nav-icon">🧠</span>
                    聪明钱
                </a>
                <a href="#market" class="nav-link" data-section="market">
                    <span class="nav-icon">📈</span>
                    市场数据
                </a>
                <a href="#risks" class="nav-link" data-section="risks">
                    <span class="nav-icon">⚠️</span>
                    风险分析
                </a>
            </div>
            <div class="nav-toggle" id="navToggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 搜索栏 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索代币、钱包地址或关键词..." class="search-input">
                <button id="searchBtn" class="search-btn">
                    <span class="search-icon">🔍</span>
                </button>
            </div>
            <div class="search-filters">
                <select id="searchType" class="filter-select">
                    <option value="all">全部</option>
                    <option value="tokens">代币</option>
                    <option value="smartMoney">聪明钱</option>
                </select>
                <button id="refreshBtn" class="refresh-btn">
                    <span class="refresh-icon">🔄</span>
                    刷新数据
                </button>
            </div>
        </div>

        <!-- 概览面板 -->
        <section id="dashboard" class="content-section active">
            <div class="section-header">
                <h2>数据概览</h2>
                <div class="last-update">
                    最后更新: <span id="lastUpdate">加载中...</span>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">💰</div>
                    <div class="stat-content">
                        <div class="stat-value" id="totalTokens">-</div>
                        <div class="stat-label">代币总数</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">🧠</div>
                    <div class="stat-content">
                        <div class="stat-value" id="totalSmartWallets">-</div>
                        <div class="stat-label">聪明钱钱包</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">📊</div>
                    <div class="stat-content">
                        <div class="stat-value" id="totalDataPoints">-</div>
                        <div class="stat-label">数据点</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">⚠️</div>
                    <div class="stat-content">
                        <div class="stat-value" id="totalRisks">-</div>
                        <div class="stat-label">风险警告</div>
                    </div>
                </div>
            </div>

            <!-- 热门代币 -->
            <div class="dashboard-section">
                <h3>🔥 热门代币</h3>
                <div class="top-tokens-container">
                    <div id="topTokensList" class="tokens-list">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>

            <!-- 顶级聪明钱 -->
            <div class="dashboard-section">
                <h3>🏆 顶级聪明钱</h3>
                <div class="top-smart-money-container">
                    <div id="topSmartMoneyList" class="smart-money-list">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 代币分析面板 -->
        <section id="tokens" class="content-section">
            <div class="section-header">
                <h2>代币分析</h2>
                <div class="section-controls">
                    <select id="tokenCategory" class="filter-select">
                        <option value="">所有分类</option>
                        <option value="large_cap">大盘股</option>
                        <option value="mid_cap">中盘股</option>
                        <option value="small_cap">小盘股</option>
                        <option value="micro_cap">微盘股</option>
                    </select>
                    <select id="tokenSort" class="filter-select">
                        <option value="score">按评分排序</option>
                        <option value="avgPrice">按价格排序</option>
                        <option value="avgVolume24h">按交易量排序</option>
                        <option value="avgMarketCap">按市值排序</option>
                    </select>
                </div>
            </div>

            <div class="tokens-container">
                <div id="tokensList" class="data-table">
                    <div class="loading">加载中...</div>
                </div>
                <div class="pagination" id="tokensPagination">
                    <!-- 分页控件将在这里动态生成 -->
                </div>
            </div>
        </section>

        <!-- 聪明钱面板 -->
        <section id="smart-money" class="content-section">
            <div class="section-header">
                <h2>聪明钱分析</h2>
                <div class="section-controls">
                    <select id="smartMoneyRisk" class="filter-select">
                        <option value="">所有风险等级</option>
                        <option value="low">低风险</option>
                        <option value="medium">中风险</option>
                        <option value="high">高风险</option>
                        <option value="very_high">极高风险</option>
                    </select>
                    <select id="smartMoneySort" class="filter-select">
                        <option value="smartScore">按智能评分排序</option>
                        <option value="avgPnl7d">按7天PnL排序</option>
                        <option value="avgPnl30d">按30天PnL排序</option>
                    </select>
                </div>
            </div>

            <div class="smart-money-container">
                <div id="smartMoneyList" class="data-table">
                    <div class="loading">加载中...</div>
                </div>
                <div class="pagination" id="smartMoneyPagination">
                    <!-- 分页控件将在这里动态生成 -->
                </div>
            </div>
        </section>

        <!-- 市场数据面板 -->
        <section id="market" class="content-section">
            <div class="section-header">
                <h2>市场数据</h2>
            </div>

            <div class="market-container">
                <div id="marketData" class="market-overview">
                    <div class="loading">加载中...</div>
                </div>
                
                <div class="trends-section">
                    <h3>📈 趋势分析</h3>
                    <div id="trendsData" class="trends-container">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 风险分析面板 -->
        <section id="risks" class="content-section">
            <div class="section-header">
                <h2>风险分析</h2>
                <div class="section-controls">
                    <select id="riskSeverity" class="filter-select">
                        <option value="">所有严重程度</option>
                        <option value="low">低</option>
                        <option value="medium">中</option>
                        <option value="high">高</option>
                        <option value="critical">严重</option>
                    </select>
                </div>
            </div>

            <div class="risks-container">
                <div id="risksList" class="risks-list">
                    <div class="loading">加载中...</div>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="modal-close">&times;</span>
            <div id="modalBody" class="modal-body">
                <!-- 模态框内容将在这里动态生成 -->
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loadingIndicator" class="loading-indicator">
        <div class="spinner"></div>
        <div class="loading-text">加载中...</div>
    </div>

    <!-- 通知消息 -->
    <div id="notification" class="notification">
        <div class="notification-content">
            <span id="notificationText"></span>
            <button id="notificationClose" class="notification-close">&times;</button>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/app.js"></script>
</body>
</html>

